import React, { useEffect } from 'react'
import { connect } from "react-redux"
import { Link, withRouter } from "react-router-dom"
import { Menu, Button } from 'antd';


function Absid(props) {
    const { SubMenu } = Menu;
    useEffect(() => {
        props.dispatch({
            type: "getMenus",
            username: "bobo"
        })
    }, []);
    
    const initMenu = (menuConfig) => {
        const menusComp = menuConfig.map((item, index) => {
            if (!item.children) {
                return (
                    <Menu.Item key={item.path} icon={item.icon}>
                        <Link to={item.path}>{item.name}</Link>
                    </Menu.Item>
                )
            }  else {
                return (
                    <SubMenu key={item.path} icon={item.icon} title={item.name}>
                        {initMenu(item.children)}
                    </SubMenu>
                )
            }
        })
        return menusComp
    }

    return (
        <div style={{ width: '100%' }}>
            <Menu
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                inlineIndent={18}
                mode="inline"
                theme="dark"
            >
                {props.menus?initMenu(props.menus[0].children):null}
            </Menu>
        </div>
    )
}
const mapStateToProps = (state) => {
    return {
        menus: state.menuRC.menus
    }
}
export default connect(mapStateToProps)(Absid)
